<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="180px"
      class="form-search from-wrapper"
    >
      <el-form-item label="IP地址：" prop="ip">
        <el-input v-model="form.ip" placeholder="请输入IP地址"></el-input>
      </el-form-item>
      <el-form-item label="端口号：" prop="port">
        <el-input v-model="form.port" placeholder="请输入端口号"></el-input>
      </el-form-item>
      <el-form-item label="主题参数：" prop="param">
        <template v-for="(domain, index) in form.param">
          <el-form
            inline
            label-width="120px"
            :model="domain"
            ref="domainRef"
            :key="index"
          >
            <el-tag
              color="#247382"
              effect="dark"
              type="success"
              :key="index + 'label'"
              >{{ index + 1 }}</el-tag
            >
            <el-form-item
              label="标签："
              prop="label"
              :rules="{
                required: true,
                message: '请输入标签',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="domain.label"
                placeholder="请输入标签"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="主题："
              prop="title"
              :rules="{
                required: true,
                message: '请输入主题',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="domain.title"
                placeholder="请输入主题"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="拉取频率："
              prop="frequency"
              :rules="{
                required: true,
                message: '请输入拉取频率',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="domain.frequency"
                placeholder="请输入拉取频率"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label
                class="btn-nav-bg stripe-btn"
                v-if="form.param.length > 1"
                @click="deleteLine(index)"
                >删除</label
              >
              <label
                class="btn-nav-bg stripe-btn"
                v-if="index == form.param.length - 1"
                @click="addTitle"
                >添加主题</label
              >
            </el-form-item>
          </el-form>
        </template>
      </el-form-item>
      <el-form-item>
        <label class="btn-nav-bg stripe-btn" @click="save">保存设置</label>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pointDetail, pointSave } from "@/api/pointMaintain";
export default {
  name: "DataSource",
  components: {},
  data() {
    return {
      form: {
        ip: "",
        port: "",
        param: [
          {
            label: "",
            title: "",
            frequency: "",
          },
        ],
      },
      rules: {
        ip: { required: true, message: "请输入IP地址", trigger: "blur" },
        port: { required: true, message: "请输入端口号", trigger: "blur" },
        param: { required: true, message: "请输入主题参数", trigger: "blur" },
      },
    };
  },
  mounted() {
    // this.getForm();
  },
  methods: {
    getForm() {
      pointDetail().then((res) => {
        if (res.code == 20000) {
          let obj = res.data;
          obj.param = JSON.parse(obj.param);
          this.form = { ...obj };
        }
      });
    },
    save() {
      let ValidPro = new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$refs.domainRef.forEach((itemRef) => {
              itemRef.validate((valid) => {
                if (valid) {
                  resolve(true);
                } else {
                  reject(false);
                }
              });
            });
          } else {
            reject(false);
          }
        });
      });
      ValidPro.then((flag) => {
        if (flag) {
          let params = { ...this.form };
          params.param = JSON.stringify(params.param);
          pointSave(params).then((res) => {
            if (res.code == 20000) {
              this.$message.success("保存成功");
            }
          });
        }
      }).catch((error) => {
        return error;
      });
    },
    deleteLine(index) {
      this.form.param.splice(index, 1);
    },
    addTitle() {
      this.form.param.push({
        label: "",
        title: "",
        frequency: "",
      });
    },
  },
};
</script>
<style scoped lang="less">
.form-search {
  height: calc(100vh - 160px);
  overflow-y: auto;
}
::v-deep .form-search .el-form-item {
  margin-bottom: 22px;
}
</style>
